<template>
  <div class="reserve">
    <van-nav-bar
      title="心理安全辅导预约"
      left-text="返回"
      left-arrow
      fixed
      @click="handleBack"
    />
    <ReserveForm></ReserveForm>

    <div class="container">
      <van-card desc="女 26岁" title="刘三明">
        <template #price>
          <p>
            可预约日期: 2021-8-25、2021-8-26、2021-8-27、2021-8-29、2021-8-30
          </p>
        </template>
        <template #footer>
          <van-button size="mini" type="primary">查看</van-button>
        </template>
      </van-card>

      <van-card desc="女 26岁" title="刘三明">
        <template #price>
          <p>
            可预约日期: 2021-8-25、2021-8-26、2021-8-27、2021-8-29、2021-8-30
          </p>
        </template>
        <template #footer>
          <van-button size="mini" type="primary">查看</van-button>
        </template>
      </van-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useBack } from '/@/use/useRouteBack'
import ReserveForm from './search-form.vue'
import { onMounted, ref } from 'vue'
import { IForm } from '../types'
import { receiveQuery } from '../api'

const { back: handleBack } = useBack()

const { reserveList } = useReserveList()

function useReserveList() {
  const reserveList = ref<IForm[]>([])

  onMounted(async () => {
    const {
      data: { record },
    } = await receiveQuery()
    reserveList.value = record
  })

  return { reserveList }
}
</script>

<style lang="less" scoped>
.reserve {
  padding-top: 60px;
  margin-bottom: 60px;

  .container {
    margin-top: 20px;
  }
}
</style>
